---
title: Next.js
description: Reguli de linting specifice Next.js pentru Ultracite.
---

Configurația Next.js conține reguli de linting specifice Next.js pentru optimizarea imaginilor, structura documentului și tiparele App Router.

## Instalare

Adăugați configurația Next.js la `biome.jsonc`:

```jsonc title="biome.jsonc"
{
  "extends": ["ultracite/core", "ultracite/next"]
}
```

## Prezentare generală

Această configurație adaugă reguli specifice pentru dezvoltarea Next.js:

- **Optimizarea imaginilor**: Impune utilizarea componentei Next.js Image
- **Structura documentului**: Previne utilizarea necorespunzătoare a componentelor speciale Next.js
- **Componente client**: Asigură gestionarea corectă a componentelor client asincrone
- **Fișiere de configurare**: Tratare specială pentru fișierele `next.config.*`

## Reguli specifice Next.js

### Incubator

| Regula | Setare | Descriere |
|--------|--------|-----------|
| `noNextAsyncClientComponent` | `error` | Previne componentele client asincrone în Next.js. Componentele client ar trebui să fie sincronice; folosiți componente server pentru operații asincrone. |

### Performanță

| Regula | Setare | Descriere |
|--------|--------|-----------|
| `noImgElement` | `error` | Interzice utilizarea elementului HTML `<img>`. Folosiți componenta Next.js `<Image>` în schimb pentru optimizarea automată a imaginilor. |

### Stil

| Regula | Setare | Descriere |
|--------|--------|-----------|
| `noHeadElement` | `error` | Interzice utilizarea elementului HTML `<head>`. Folosiți `next/head` de la Next.js sau API-ul de metadata al App Router în schimb. |

### Suspecte

| Regula | Setare | Descriere |
|--------|--------|-----------|
| `noDocumentImportInPage` | `error` | Previne importarea `next/document` în fișierele de pagină. `_document.tsx` ar trebui să existe doar în `pages/_document.tsx`. |
| `noHeadImportInDocument` | `error` | Previne importarea `next/head` în `_document.tsx`. Folosiți `<Head>` din `next/document` în schimb. |

## Suprapuneri pentru fișierele de configurare

Presetul Next.js include tratare specială pentru fișierele de configurare și componentele App Router:

### Fișiere de configurare Next.js

```jsonc
{
  "overrides": [
    {
      "includes": ["next.config.*"],
      "linter": {
        "rules": {
          "suspicious": {
            "useAwait": "off"
          }
        }
      }
    }
  ]
}
```

Aceasta permite modele de configurare Next.js care, în mod normal, s-ar putea să nu treacă regulile de linting.

### Pagini și layout-uri App Router

```jsonc
{
  "overrides": [
    {
      "includes": ["**/page.{ts,tsx,js,jsx}", "**/layout.{ts,tsx,js,jsx}"],
      "linter": {
        "rules": {
          "suspicious": {
            "useAwait": "off"
          }
        }
      }
    }
  ]
}
```

Componentele de pagină și layout ale App Router sunt permise să fie asincrone fără a necesita `await`, deoarece Next.js le tratează special pentru redarea pe server și preluarea datelor.